<template>
  <div>
    <div>
      <h1>单向链表</h1>
      <div class="but-view">
        <el-button @click="next1">>>></el-button>
      </div>
      <div class="test-item">
        <div v-for="(item) in listTemp" :key="item.index" :class="['item', {'sel-item': curItem.index === item.index}]">
          {{ item.index }}
        </div>
      </div>
      <code>
        data
      </code>
      <h1>循环链表</h1>
      <div class="but-view">
        <el-button @click="next2">{{ '>>>' }}</el-button>
        <el-button @click="next3">{{'<<<'}}</el-button>
      </div>
      <div class="test-item">
        <div v-for="(item) in doubleListTemp" :key="item.index" :class="['item', {'sel-item': curCircularItem.index === item.index}]">
          {{ item.index }}
        </div>
      </div>
    </div>

  </div>
</template>
<script setup>
import { LinkedList, DoubleWayLinkedList, toLinkedList } from '@/algorithm/linked-list'
import { useState } from '@/hooks/index'
const linkedListEample = new LinkedList({ len: 4 })
const DoubleWayLinkedListEample = new DoubleWayLinkedList({ len: 4 })

const listTemp = toLinkedList(linkedListEample)
const doubleListTemp = toLinkedList(DoubleWayLinkedListEample)
const [curItem, setcurItem] = useState(listTemp[0])
const [curCircularItem, setCurCircularItem] = useState(doubleListTemp[0])

const next1 = () => {
  const nextItem = curItem.value.next
  console.log(nextItem)
  if (!nextItem) return
  setcurItem(nextItem)
}

const next2 = () => {
  const nextItem = curCircularItem.value.next
  console.log(listTemp)
  console.log(nextItem)
  if (!nextItem) return
  setCurCircularItem(nextItem)
}
const next3 = () => {
  const nextItem = curCircularItem.value.pre
  if (!nextItem) return
  setCurCircularItem(nextItem)
}

</script>
<style lang="scss" scoped>
.but-view {
  padding: 20px 0px;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.test-item {
  display: flex;
  justify-content: center;
  .item {
    width: 200px;
    height: 100px;
    font-size: 50px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    border: 1px solid #000;
  }
  .sel-item {
    background-color: aquamarine;
  }
}
</style>
